

import React from './react';
import ReactDOM from './react-dom';


/* let element = <div key="title" id="title">div</div>;
console.log(element);
debugger
ReactDOM.render(element,document.getElementById('root')); 
*/

//1. key相同,类型相同,复用老节点，只更新属性
document.getElementById('single1').addEventListener('click', () => {
  let element = (
    <div key="title" id="title">title</div>
  );
  ReactDOM.render(element, document.getElementById('root'));
});
document.getElementById('single1Update').addEventListener('click', () => {
  let element = (
    <div key="title" id="title2">title2</div>
  );
    debugger
    ReactDOM.render(element,document.getElementById('root')); 
}); 



//4.原来多个节点，现在只有一个节点,删除多余节点
/* document.getElementById('single4').addEventListener('click', () => {
    let element = (
      <ul key="ul">
        <li key="A">A</li>
        <li key="B" id="B">B</li>
        <li key="C">C</li>
      </ul>
    );
    debugger
    ReactDOM.render(element,document.getElementById('root')); 
});
document.getElementById('single4Update').addEventListener('click', () => {
    let element = (
      <ul key="ul">
        <li key="B" id="B2">B2</li>
      </ul>
    );
    debugger
    ReactDOM.render(element,document.getElementById('root')); 
}); */



